<template>
  <div class="demo-title">image/demo1</div>
  <div class="demo">
    <div class="demo-item">
      <Image class="demo-item-img" :src="imgSrc" width="64px" height="64px" fit="contain" />
      <p class="demo-item-name">contain</p>
    </div>
    <div class="demo-item">
      <Image class="demo-item-img" :src="imgSrc" width="64px" height="64px" fit="cover" />
      <p class="demo-item-name">cover</p>
    </div>
    <div class="demo-item">
      <Image class="demo-item-img" :src="imgSrc" width="64px" height="64px" fit="fill" />
      <p class="demo-item-name">fill</p>
    </div>
    <div class="demo-item">
      <Image class="demo-item-img" :src="imgSrc" width="64px" height="64px" fit="none" />
      <p class="demo-item-name">none</p>
    </div>
    <div class="demo-item">
      <Image class="demo-item-img" :src="imgSrc" width="64px" height="64px" fit="scale-down" />
      <p class="demo-item-name">scale-down</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Image from '@sscd-mobile/image'
  const imgSrc = 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/image/image-1.png'
</script>

<style lang="less" scoped>
  .demo {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: #fff;
    > .demo-item {
      > .demo-item-name {
        text-align: center;
      }
    }
  }
</style>
